<!--
 * @Author: zhangjingyu
 * @Date: 2021-04-19 11:26:01
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-04-26 17:41:49
 * @FilePath: \vprisk10.14\src\components\vprisk-grid\VpToolbar.vue
 * @Description: 按钮组件
-->
<template>
  <div id="btn">
    <el-button @click="action" v-if="type === 'normal' || !type">
      {{ text }}
    </el-button>
    <el-button @click="action" v-if="isSimpleType"> {{ text }} </el-button>
    <el-button @click="action" v-if="type === 'checkTable'">
      {{ text }}
    </el-button>
    <el-button @click="action" v-if="type === 'checkTree'">
      {{ text }}
    </el-button>
    <el-dialog
      v-dialogDrag
      :title="dialogTitle"
      :visible.sync="visible"
      :width="dialogWidth"
      append-to-body
    >
      <!-- 可传入自定义内容 -->
      <slot name="dialogBody"></slot>
      <!-- 内置table  -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        @row-click="rowChecked"
        v-if="useInnerTable && type === 'checkTable'"
      >
        <el-table-column
          width="55"
          type="selection"
          v-if="useTableSelection"
        ></el-table-column>
        <el-table-column
          v-for="item in tableProps"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <!-- 内置tree -->
      <vp-tree
        v-if="useInnerTree && type === 'checkTree'"
        class="ie-tree-style"
        :vp-header="{
          show: true,
          text: treeTitle,
          search: true,
          name: treeProps.label
        }"
        :filter-node-method="filterNode"
        :data="treeData"
        :props="treeProps"
        show-checkbox
        default-expand-all
        ref="configTree"
        :node-key="nodeKey"
        :expand-on-click-node="false"
        check-on-click-node
      ></vp-tree>
      <div slot="footer">
        <el-button @click="checkComfirm">确定</el-button>
        <el-button @click="visible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "vp-toolbar",
  props: {
    text: String, // 按钮文字
    type: String, // add:新增，edit：编辑，delete：删除，view:查看，likeLock:锁定启动之类
    url: String, //  操作请求地址
    dialogTitle: String, // 弹窗标题
    dialogWidth: { type: [String, Number], default: "520px" },
    noAction: { type: Boolean, default: false }, // 不使用按钮的内置操作逻辑
    useFooterBtn: { type: Boolean, default: true }, // 是否使用弹窗内置底部按钮
    useInterFunc: { type: Boolean, default: true }, // 是否使用内置方法(仅对于新增编辑删除锁定等常规逻辑)
    requestMethod: { type: String, default: "post" }, // 请求方式，默认post
    idField: { type: String, default: "id" }, // 字段名：删除，锁定，解锁，启动等按钮用
    useInnerTable: { type: Boolean, default: true }, // 是否使用按钮弹窗内内置table(需要传入tableData)
    useInnerTree: { type: Boolean, default: true }, // 是否使用按钮弹窗内的内置tree(需要传入treeData,treeProps,nodeKey)
    useTableSelection: { type: Boolean, default: true }, //弹窗内置table是否显示选择框
    treeTitle: String,
    treeProps: {
      type: Object,
      default: () => ({
        children: "children",
        label: "name",
        value: "id"
      })
    },
    nodeKey: { type: String, default: "id" },
    tableData: {
      // 表格数据
      type: Array,
      default: () => []
    },
    treeData: {
      // 树数据
      type: Array,
      default: () => []
    },
    tableProps: {
      // 表格字段和字段名
      type: Array,
      default: () => []
    },
    beforeAction: Function
    // afterOpen:{type:Function,default:()=>{}},
  },
  data() {
    return {
      visible: false
    };
  },
  computed: {
    isSimpleType() {
      let t = this.type;
      if (
        t === "add" ||
        t === "edit" ||
        t === "view" ||
        t === "delete" ||
        t === "lock" ||
        t === "start" ||
        t === "stop" ||
        t === "unlock"
      ) {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    this.tree = this.$refs.configTree;
    this.table = this.$refs.multipleTable;
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    action() {
      let props = { ...this.$props };
      let before = new Promise((resove, reject) => {
        let a =typeof this.beforeAction=='function'? this.beforeAction():true;
        if (a === false) {
          reject(this.type+'执行被打断');
        } else {
          resove(props);
        }
      });
      before.then(
        val => {
          this.bus.$emit("vpToolbarAction", val);
          this.$emit("action", this);
          this.dialogOpen();
        },
        err => {
          console.log(err);
        }
      );
    },
    checkComfirm() {
      let data = [];
      if (this.useInnerTable) {
        data = this.$refs.multipleTable.selection;
        if (data.length < 1) {
          return this.$message.warning("请至少选择一条数据");
        }
      }
      if (this.useInnerTree) {
        data = this.$refs.configTree.getCheckedNodes();
        if (data.length < 1) {
          return this.$message.warning("请至少选择一条");
        }
      }
      this.$emit("check", this, data);
    },
    rowChecked(row) {
      if (this.$refs.multipleTable && this.useTableSelection) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(row, true);
      }
    },
    // 清除table打钩
    clecrTableSelection() {
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection();
      });
    },
    // 给table、表格打钩
    checkTableByRows(array) {
      this.$nextTick(() => {
        for (let i = 0; i < array.length; i++) {
          this.$refs.multipleTable.toggleRowSelection(array[i], true);
        }
      });
    },
    // 清除tree打钩
    clearTreeCheck() {
      this.$nextTick(() => {
        this.$refs.configTree.setCheckedNodes([]);
      });
    },
    // 根据树节点数据组成的数组给tree打钩
    setCheckedNodes(nodes) {
      this.$nextTick(() => {
        this.$refs.configTree.setCheckedNodes(nodes);
      });
    },
    // 关闭弹窗
    dialogClose() {
      if (this.type === "checkTable" || this.type === "checkTree") {
        this.visible = false;
      }
    },
    // 打开弹窗
    dialogOpen() {
      if (this.type === "checkTable" || this.type === "checkTree") {
        this.visible = true;
      }
    }
  
  }
};
</script>

<style lang="scss" scoped>
#btn {
  display: inline-block;
  min-width: 82px;
  margin-right: 5px;
}
</style>